<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单悬停动画</title>
	</head>
	<style>
		@font-face {
		  font-family: "iconfont"; /* Project id 4632264 */
		  src: url('//at.alicdn.com/t/c/font_4632264_jzt68f2cb2s.woff2?t=1721872122459') format('woff2'),
		       url('//at.alicdn.com/t/c/font_4632264_jzt68f2cb2s.woff?t=1721872122459') format('woff'),
		       url('//at.alicdn.com/t/c/font_4632264_jzt68f2cb2s.ttf?t=1721872122459') format('truetype');
		}
		
		.iconfont {
		    font-family: "iconfont" !important;
		    font-size: 16px;
		    font-style: normal;
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
		}
		
		.icon-steam:before {
		  content: "\e7f7";
		}
		
		.icon-wechat:before {
		  content: "\e6ca";
		}
		
		.icon-wegame:before {
		  content: "\e600";
		}
		
		.icon-douyin:before {
		  content: "\e61d";
		}
		
		* {
		    margin: 0;
		    padding: 0;
		    box-sizing: border-box;
		}
		
		body {
		    height: 100vh;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    flex-direction: column;
		    background-color: #e8e8e8;
		    overflow: hidden;
		}
		
		.item {
		    display: inline-flex;
		    align-items: center;
		    height: 60px;
		    width: 60px;
		    margin: 4px 8px;
		    overflow: hidden;
		    background: #fff;
		    border-radius: 30px;
		    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.24);
		    transition: all 0.5s;
		}
		
		.item:hover {
		    width: 180px;
		    border: none;
		}
		
		.item:hover div {
		    background-color: #e9e9e9;
		}
		
		.item:hover:nth-child(1) div span {
		    color: #25d366;
		}
		
		.item:hover:nth-child(2) div span {
		    color: #f00;
		}
		
		.item:hover:nth-child(3) div span {
		    color: orange;
		}
		
		.item:hover:nth-child(4) div span {
		    color: #066093;
		}
		
		.item div {
		    width: 60px;
		    height: 60px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    border-radius: 30px;
		    font-size: 28px;
		    position: relative;
		    transition: all 0.5s;
		}
		
		.item div span {
		    font-size: 40px;
		}
		
		.item:nth-child(2) div span {
		    font-size: 35px;
		}
		
		.item div::after {
		    position: absolute;
		    width: fit-content;
		    word-break: keep-all;
		    font-size: medium;
		    left: 72px;
		    pointer-events: auto;
		    cursor: pointer;
		}
		
		.item:nth-child(1) div::after {
		    content: "打开WeChat";
		}
		
		.item:nth-child(2) div::after {
		    content: '打开抖音';
		}
		
		.item:nth-child(3) div::after {
		    content: '打开WeGame';
		}
		
		.item:nth-child(4) div::after {
		    content: '打开STEAM';
		}
		
		.item div:hover::after {
		    color: cadetblue;
		}
	</style>
	<body>
		<div class="item">
		    <div><span class="iconfont icon-wechat"></span></div>
		</div>
		<div class="item">
		    <div><span class="iconfont icon-douyin"></span></div>
		</div>
		<div class="item">
		    <div><span class="iconfont icon-wegame"></span></div>
		</div>
		<div class="item">
		    <div><span class="iconfont icon-steam"></span></div>
		</div>
	</body>
</html>